<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/222.jpg" style="width: 190rpx;height: 190rpx;" mode=""></image>
		</view>
		<view class="form">
			<view class="form-item">
				<image src="../../static/phone.png" style="width: 27rpx;height: 38rpx;margin-right: 26rpx;" mode="">
				</image>
				<u--input type="number" :maxlength="11" placeholder="请输入手机号码" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="form.mobile"></u--input>
			</view>
			<view class="form-item">
				<image src="../../static/lock.png" style="width: 30rpx;height: 34rpx;margin-right: 26rpx;" mode="">
				</image>
				<u--input type="number" :maxlength="6" placeholder="请输入验证码" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="form.captcha"></u--input>
				<view class="code-btn" v-if="sec">
					{{sec}}s后获取
				</view>
				<view class="code-btn" v-else @click="sendSms()">
					获取验证码
				</view>
			</view>
		</view>
		<view class="login-btn" @click="mobilelogin()">
			登录
		</view>
		<view class="not-btn" @click="back()">
			暂不登录
		</view>
		<view class="tip">
			其他登录方式
		</view>
		<view class="other-box">
			<view class="other-item" @click="wechatLogin">
				<image src="../../static/wechat.png" style="width: 84rpx;height: 84rpx;margin-bottom: 22rpx;" mode="">
				</image>
				<text>微信</text>
			</view>
			<navigator url="./login-verifier" hover-class="none">
				<view class="other-item">
					<image src="../../static/verifier.png" style="width: 84rpx;height: 84rpx;margin-bottom: 22rpx;"
						mode="">
					</image>
					<text>核销员</text>
				</view>
			</navigator>
		</view>
		<!-- 授权手机号 -->
		<u-popup :show="show" :round="10" mode="center" @close="show = false">
			<view class="modal-box">
				<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					captcha: ''
				},
				sec: 0,
				intelval: null,
				show:false,
				userInfo:{}
			}
		},
		methods: {
			// 微信登录
			wechatLogin() {
				uni.getUserProfile({
					desc: '请求获取个人信息',
					lang: 'zh_CN',
					success: (userRes) => {
						if (userRes.errMsg === 'getUserProfile:ok') {
							uni.login({
								provider: 'weixin',
								onlyAuthorize: true,
								success: (res) => {
									let pramas = {
										code: res.code,
										rawData: userRes.userInfo
									}
									uni.$u.http.post('/login/wxLogin', pramas).then(bindRes => {
										if (bindRes.data.user) {
											this.$u.toast('登录成功')
											uni.setStorageSync('token', bindRes.data.user.token)
											this.back()
										} else{
											uni.setStorageSync('bindInfo',bindRes.data.userinfo)
											// this.userInfo = bindRes.data.userinfo
											// this.show = true
											uni.navigateTo({
												url:'./bind'
											})
										}
									})
								}
							})
						} else {
							this.$u.toast('授权失败')
						}

					}
				})
			},
			// 短信验证码登录
			mobilelogin() {
				if (!uni.$u.test.mobile(this.form.mobile)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.form.captcha) {
					this.$u.toast('请输入验证码')
					return
				}
				uni.$u.http.post('/login/mobilelogin', this.form).then(res => {
					this.sec = 0
					clearInterval(this.intelval)
					this.$u.toast('登录成功')
					uni.setStorageSync('token', res.data.token)
					// uni.setStorageSync('user',res.data.user)
					this.back()
				})
			},
			// 获取短信验证码
			sendSms() {
				if (!uni.$u.test.mobile(this.form.mobile)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				uni.$u.http.post('/sms/send', {
					mobile: this.form.mobile
				}).then(res => {
					this.$u.toast('发送成功')
					this.sec = 120
					this.intelval = setInterval(() => {
						if (this.sec) {
							this.sec--
						} else {
							clearInterval(this.intelval)
						}
					}, 1000)
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.logo {
		margin-top: 166rpx;
		border-radius: 42rpx;
		overflow: hidden;
	}

	.form {
		margin-top: 88rpx;
		width: 532rpx;

		.form-item {
			margin-top: 38rpx;
			padding-bottom: 18rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.code-btn {
				width: 160rpx;
				height: 38rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				text-align: center;
				line-height: 38rpx;
				background: #ffe300;
				border-radius: 12rpx;
			}
		}

	}

	.login-btn {
		width: 572rpx;
		height: 84rpx;
		background: #D8D8D8 linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
		border-radius: 42rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		text-align: center;
		line-height: 84rpx;
		margin-top: 86rpx;
	}

	.not-btn {
		width: 572rpx;
		height: 84rpx;
		border: 1rpx solid #fef5bf;
		border-radius: 42rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		text-align: center;
		line-height: 84rpx;
		margin-top: 20rpx;
	}

	.tip {
		font-size: 28rpx;
		font-weight: 400;
		color: #ABABAB;
		margin-top: 46rpx;
	}

	.other-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 288rpx;
		margin-top: 46rpx;

		.other-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	.modal-box{
		width: 420rpx;
		height: 86rpx;
		.phone-btn{
			width: 420rpx;
			height: 86rpx;
			font-size: 32rpx;
			color: #ffffff;
			background: #53c21d;
			border-radius: 12rpx;
		}
	}
</style>
